<template>
  <div>
    <div>
      <el-form  style="display: flex; justify-content: flex-start; margin: 10px 0" :inline="true"  class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="tname" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" circle @click="queryAllPackage()"
            ></el-button
          >
        </el-form-item>
      </el-form>
      <el-button
       style="display: flex; justify-content: flex-start; margin: 10px 0"
        @click="
          dialogFormVisible = true;
          package1 = {};sign='add';
          tit='新增套餐';
          queryAllPro();
          imageUrl='';
        "
        type="primary"
        >新增</el-button
      >
    </div>
    <div>
      <el-table :data="packageList" @selection-change="handleSelectionChange" height="65vh">
        <el-table-column prop="tid" type="selection" >
        </el-table-column>
        <el-table-column prop="tid" label="套餐编号">
        </el-table-column>
        <el-table-column prop="tname" label="套餐名称" >
        </el-table-column>
        <el-table-column prop="sex" label="适用性别" >
          <template  slot-scope="scope">
            <span>{{ scope.row.sex | sex }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="适用年龄" >
        </el-table-column>
        <el-table-column prop="price" label="套餐价格" >
        </el-table-column>
        <el-table-column prop="brief" label="套餐介绍" >
        </el-table-column>
        <el-table-column prop="tid" label="操作">
          <template slot-scope="scope">
            <el-button circle type="primary"
             @click="tit='修改套餐';dialogFormVisible = true;
             sign='update';package1=scope.row;imageUrl=scope.row.img;
             queryProByTcId()" 
             icon="el-icon-edit">
            </el-button>
            <el-button
              @click="DeletePackage(scope.row.tid)"
              type="danger"
              icon="el-icon-delete"
              circle
              ></el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 3, 4, 6, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog :title="tit" width="60%" :visible.sync="dialogFormVisible">

      <el-tabs type="border-card">
  <el-tab-pane label="套装基本信息">
    <el-form :model="package1">
      <el-upload
        label="上传照片"
        class="avatar-uploader"
        action="/api/lzh/uploadImg"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :on-error="failure"
        name="file"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
        <el-form-item label="套餐名称" :label-width="formLabelWidth">
          <el-input v-model="package1.tname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="适用性别" :label-width="formLabelWidth">
            <el-radio-group v-model="package1.sex">
                <el-radio :label="0">女</el-radio>
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">不限</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="适用年龄" :label-width="formLabelWidth">
          <el-input v-model="package1.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐价格" :label-width="formLabelWidth">
          <el-input v-model="package1.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐介绍" :label-width="formLabelWidth">
          <el-input v-model="package1.brief" autocomplete="off"></el-input>
        </el-form-item>
       
      </el-form>
  </el-tab-pane>
  <el-tab-pane @click="generateData()" label="检查项">
    <div style="text-align: center">
    <el-transfer
      style="text-align: left; display: inline-block"
      v-model="value"
      filterable
      :left-default-checked="[]"
      :right-default-checked="[1]"
      :render-content="renderFunc"
      :titles="['选择项', '已有项']"
      :button-texts="['', '']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      :data="data">
    </el-transfer>
  </div>
  
  </el-tab-pane>
</el-tabs>
<div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            commit();
          "
          >确 定</el-button
        >
      </div>
     
    </el-dialog>


  </div>
</template>

<script>
export default {
  
data () {
 
    return {
      imageUrl: '',
      jcxs:[],
      data: [],
      value: [],
        renderFunc(h, option) {
          return <span>{ option.key } - { option.label }</span>;
        },
        tit:"hhh",
        sign: "add",
      dialogTableVisible: false,
      dialogFormVisible: false,
      package1: {
        tname: "",
        sex: "",
        age: 0,
        price: 0,
        brief: "",
      },
      tname: "",
      currentPage: 1,
      total: 3,
      pageSize: 4,
      packageList: [],
      formLabelWidth: "120px",
    }
   
},
filters: {
  sex:function(sex){
    return sex==0?'♀':sex==1?'♂':"不限"
    }
},
created () {
    this.queryAllPackage();
    this.queryAllPro();
},
methods: {
  failure(){
    this.$message.error('上传失败');
  },
 
  //图片上传
  handleAvatarSuccess(res, file) {
        this.imageUrl =res

      this.package1.img=res;
        console.log(res)
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return  isLt2M;
      },

 generateData () {
        var data1 = [];
        var jcx =this.jcxs;
        jcx.forEach((c, index) => {
          data1.push({
            label: c.pname,
            key: c.pid,
          });
        });
       this.data=data1;
      },
//查询所有检查i项目组
  queryAllPro(){
    this.axios.post("/api/lzh/queryAllPro").then(result=>{
               this.jcxs= result.data;
               this.generateData();
          })
  },
  //根据套餐id查询检查组
queryProByTcId(){

  this.queryAllPro();
  this.axios.post("/api/lzh/queryProByTcId?tid="+this.package1.tid)
          .then((result) => {
           console.log(result.data)
           this.value.length=0;
            this.data.map(item=>{
              result.data.forEach(i=>{
                console.log(item.key)
                console.log(i)
                if(item.key==i.pid){
                  this.value.push(item.key);
                }
              })
            })
            console.log(this.value)
          })
},
  handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      },
    commit(){
        if(this.sign=="add"){
      this.axios.post("/api/lzh/addPackage", {obj:this.package1,vlues:this.value}).then((result) => {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.queryAllPackage();
      });
      }else{
      this.axios.post("/api/lzh/UpdatePackage", {obj:this.package1,vlues:this.value}).then((result) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.queryAllPackage();
      });
      }
    },
    DeletePackage(){

    },
        queryAllPackage(){
            this.axios
        .post("/api/lzh/queryAllPackage", {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          searchObj: {
            tname: this.tname,
          },
        })
        .then((result) => {
          this.total = result.data.total;
          this.packageList = result.data.list;
        });
        },
        handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryAllPackage();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryAllPackage();
      // console.log(`当前页: ${val}`);
    },
    },
  
}
</script>

<style>
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>